<template>
  <div class="equal-scaling-box" ref="equalScalingBox">
    <div class="content" ref="contentBox"></div>
    <div @mousedown="dragEagle">
      <img src="@/assets/images/scale.png" class="drag-btn" alt />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 宽度
    viewWidth: {
      type: Number,
      default: 260,
    },
    // 高度
    viewHeight: {
      type: Number,
      default: 260,
    },
  },
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  computed: {},
  watch: {},
  methods: {
    // 操作：鼠标事件-鼠标按下准备拖动
    dragEagle(e) {
      let targetDiv = this.$refs.contentBox;
      let rightDesignMini = this.$refs.equalScalingBox;
      // 得到点击时该地图容器的宽高：
      let targetDivWidth = targetDiv.offsetWidth;
      let targetDivHeight = targetDiv.offsetHeight;

      // 得到当前鼠标点击的位置
      let startX = e.clientX;
      let startY = e.clientY;
      document.addEventListener("mousemove", move);
      document.addEventListener("mouseup", stop);
      let _this = this;
      // 鼠标移动的事件
      function move(e) {
        e.preventDefault();
        // 得到鼠标拖动的宽高距离：取绝对值
        let distX = Math.abs(e.clientX - startX);
        // let distY = Math.abs(e.clientY - startY)
        let distY = distX * (targetDivWidth / targetDivHeight);

        // 往右上方拖动：
        if (e.clientX > startX && e.clientY < startY) {
          targetDiv.style.width = targetDivWidth - distX + "px";
          targetDiv.style.height = targetDivHeight - distY + "px";
          rightDesignMini.style.width = targetDivWidth - distX + "px";
          rightDesignMini.style.height = targetDivHeight - distY + "px";
        }
        // 往左下方拖动：
        if (e.clientX < startX && e.clientY > startY) {
          targetDiv.style.width = targetDivWidth + distX + "px";
          rightDesignMini.style.width = targetDivWidth + distY + "px";
          targetDiv.style.height = targetDivHeight + distX + "px";
          rightDesignMini.style.height = targetDivHeight + distY + "px";
        }

        // 设置高宽最小范围
        if (parseInt(targetDiv.style.width) <= 260) {
          targetDiv.style.width = 260 + "px";
          rightDesignMini.style.width = 260 + "px";
        }
        if (parseInt(targetDiv.style.height) <= 258) {
          targetDiv.style.height = 258 + "px";
          rightDesignMini.style.height = 258 + "px";
        }
        // 设置高宽最大范围
        if (parseInt(targetDiv.style.width) >= 800) {
          targetDiv.style.width = 800 + "px";
          rightDesignMini.style.width = 800 + "px";
        }
        if (parseInt(targetDiv.style.height) >= 800) {
          targetDiv.style.height = 800 + "px";
          rightDesignMini.style.height = 800 + "px";
        }
        let width = targetDiv.style.width;
        if (width) {
          _this.$emit(
            "update:designRightMiniViewWidth",
            Number(width.replace("px", ""))
          );
        }
        let height = targetDiv.style.height;
        if (height) {
          _this.$emit(
            "update:designRightMiniViewHeight",
            Number(height.replace("px", ""))
          );
        }
        _this.$emit("displayRightMiniCallBack", _this.rightTopShow);
      }
      // 取消事件绑定
      function stop() {
        document.removeEventListener("mousemove", move);
        document.removeEventListener("mouseup", stop);
      }
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
.equal-scaling-box {
  width: 260px;
  height: 260px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  position: relative;
  display: flex;
  padding: 8px 8px;
  .content {
    width: 100%;
    height: 100%;
    background-color: #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
  }
  .drag-btn {
    cursor: ne-resize;
    position: absolute;
    bottom: 0;
    z-index: 999;
    left: 0;
    border-bottom-right-radius: 10px;
  }
}
</style>
